import React, { Component, createRef } from 'react';

class Header extends Component {
  state = {
    msg: '你笑起来真好看'
  }
  render(){
    return (<h1>Header -- {this.state.msg}</h1>)
  }
}


function Content(){
  return (<h1> Content </h1>)
}

class App extends Component {

  // 创建一个 ref
  divRef = createRef()
  headerRef = createRef()
  contentRef = createRef()

  render() {
    return (
      <div>
        <div ref={this.divRef}>这个是一个 div 标签</div>

        <Header ref={this.headerRef} />

        <Content ref={this.contentRef} />

        <button onClick={()=>{
          // 可以使用创建的 ref 来标记 DOM
          console.log(this.divRef.current);

          // 可以使用创建的 ref 来标记一个类组件的实例
          console.log(this.headerRef.current);
          // 并且可以操作该类组件中的内容
          this.headerRef.current.setState({
            msg: '像夏天的太阳'
          })

          // 函数式组件无法直接使用 ref,控制台警告说要使用 React.forwardRef()
          console.log(this.contentRef.current);


        }}> 获取 ref 值 </button>
      </div>
    );
  }
}

export default App;
